/* orderSub/pages/orderSettlement/orderSettlement.wxss */
@import "../../../commin/commin.less";

page {
  background-color: @text-color6;
  padding-bottom: 10rpx;
}

.order {
  .margins(40rpx, 32rpx ,40rpx, 32rpx);
  display: flex;
  .fontsize(34rpx);
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;

  .orderNo {
    color: #FFFFFF;
  }
}

.info {
  .margins(0rpx, 24rpx, 0rpx, 24rpx);
  background: linear-gradient(0deg, @white-color, #F4F6F8);
  .borders(2rpx, @white-color);
  box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
  border-radius: 16rpx;
  .paddings(40rpx, 10rpx, 30rpx, 31rpx);
  margin-top: 32rpx;

  .title {
    .kuan(642rpx);
    overflow: hidden; //溢出隐藏
    white-space: nowrap; //禁止换行
    text-overflow: ellipsis;
    margin-bottom: 31rpx;
    .fontsize(30rpx);
    font-family: PingFang SC;
    font-weight: bold;
    color: @text-color2;
  }

  .isDisplay {
    display: flex;

    .img {
      .kuangao(161rpx, 159rpx);
    }
    .titCon{
      display: inline-block;
    }
    .tit {
      margin-left: 20rpx;
      width: 70%;
      .tit1 {
       display: inline-block;
        .fontsize(26rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color3;
        margin-bottom: 12rpx;
        margin-right: 10rpx;
      }

      .tit2 {
        color: @text-color1;
      }
      .tit3{
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #A6ABB3;
      }
      .txtInterval{
        color: #A6ABB3;
        font-size: 26rpx;
        margin: 0 10rpx
      }
    }
  }
}

.detailBox {
  .margins(0rpx, 24rpx, 0rpx, 24rpx);
  background: linear-gradient(0deg, @white-color, #F4F6F8);
  .borders(2rpx, @white-color);
  box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
  border-radius: 16rpx;
  .paddings(40rpx, 31rpx, 30rpx, 31rpx);
  margin-top: 32rpx;

  .img {
	  background-image: url('https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/bg.png');
	      background-position: 0% 0%;
	      background-size: 100% 100%;
	      background-repeat: no-repeat;
    .kuangao(730rpx, 700rpx);
  }

  .detail {
    // position: absolute;
    
	
    // margin-left: 44rpx;

    .txt1 {
      .fontsize(30rpx);
      font-family: PingFang SC;
      font-weight: bold;
      color: @text-color2;
    }

    .detailDisplay {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;

      .txt2 {
        .fontsize(28rpx);
        font-family: PingFang SC;
        font-weight: 400;
        color: @text-color3;
        line-height: 34rpx;
      }

      .txt3 {
        .fontsize(28rpx);
        font-family: PingFang SC;
        font-weight: 400;
        color: @text-color1;
        line-height: 34rpx;
      }

      .acc {
        display: flex;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: @text-color3;

        a {
          margin-left: 16rpx;
          .fontsize(28rpx);
          font-family: PingFang SC;
          font-weight: 500;
          color: @blue;
          line-height: 34rpx;
        }
      }

      .txt4 {
        font-size: 34rpx;
        font-family: DIN-Bold;
        font-weight: Bold;
        color: @text-color1;
        line-height: 34rpx;

        text {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
        }
      }

      .txt5 {
        display: flex;
        align-items: center;
        .fontsize(30rpx);
        font-family: DIN-Bold;
        font-weight: Bold;
        color: @orange;
        line-height: 34rpx;

        text {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
        }

        .img {
          .kuangao(16rpx, 27rpx);
          margin-left: 16rpx;
        }
      }

      .txt6 {
        display: flex;
        align-items: center;
        .fontsize(30rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color3;

        text {
          color: @orange;
        }

        .payNum1 {
          font-family: DIN-Bold;
          font-weight: bold;
          color: @orange;
        }

        .payNum2 {
          .fontsize(34rpx);
          font-family: DIN-Bold;
          font-weight: bold;
          color: @text-color1;
        }
      }
    }

    .xian {
      margin-top: 36rpx;
      position: absolute;
      width: 640rpx;
      border-bottom: 1px dashed @text-color5;
    }

    .xian1 {
      .margins(40rpx, 0, 40rpx, 0);
      position: absolute;
      width: 640rpx;
      border-bottom: 1px solid @text-color5;
    }
  }
}
.tips{
  text-align: center;
  .fontsize(30rpx);
font-family: PingFang SC;
font-weight: 500;
color: @text-color3;
margin-top: 50rpx;
text{
  color: @blue;
}
}
.btn{
  .margins(118rpx,35rpx,61rpx,35rpx);
  .kuangao(680rpx,88rpx);
  .lineheight(88rpx);
  text-align: center;
  background: var(--btnColor);
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
border-radius: 44rpx;
.fontsize(30rpx);
font-family: PingFang SC;
font-weight: bold;
color: @white-color;
}
.btn1{
  .margins(118rpx,35rpx,61rpx,35rpx);
  .kuangao(680rpx,88rpx);
  .lineheight(88rpx);
  text-align: center;
background: @text-color4;
border-radius: 44rpx;
.fontsize(30rpx);
font-family: PingFang SC;
font-weight: bold;
color: @white-color;
}
.rechargeTitle{
  .fontsize(34rpx);
font-family: PingFang SC;
font-weight: bold;
color: @text-color2;
}
.priceType1 {
  display: flex;
  flex-wrap: wrap;

  .type1 {
    .kuangao(180rpx, 64rpx);
    .lineheight(64rpx);
    background: #F5F7FA;
    .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
    text-align: center;
    .fontsize(30rpx);
    font-family: PingFang SC;
    font-weight: 500;
    color: @text-color3;
    .margins(36rpx, 42rpx, 0, 0);
  }

  .type_action1 {
    background: rgba(20, 135, 250, 0.06);
    .borders(1rpx, @blue);
    .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
    .fontsize(30rpx);
    font-family: PingFang SC;
    font-weight: bold;
    color: @blue;
  }

  .custom1 {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    .fontsize(30rpx);
    font-family: PingFang SC;
    font-weight: 500;
    color: @text-color3;

    .custom_img1 {
      margin-left: 23rpx;
      .kuangao(26rpx, 27rpx);
    }

    .custom_input1 {
      .kuan(150rpx);
      text-align: center;
      .fontsize(28rpx);
      color: @text-color3;
      border-bottom: 1rpx solid @text-color3;
    }
  }
}
.rechargeBtn{
  .kuangao(400rpx,88rpx);
  .lineheight(88rpx);
background: linear-gradient(105deg, #2B99FF, #1B8CF5);
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
.borderradius(44rpx,44rpx,44rpx,44rpx);
text-align: center;
.fontsize(30rpx);
font-family: PingFang SC;
font-weight: bold;
color: @white-color;
.margins(83rpx,0,0,115rpx);
}

.turn_img {
  .kuangao(16rpx, 27rpx);
  margin-left: 17rpx;
}

.price_popup {
    width: 702rpx !important;
    height: 691rpx;
    margin: 0 24rpx 26rpx 24rpx;
    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
    border: 2rpx solid #FFFFFF;
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
}
